    <template>
      <!-- 编辑界面 -->
      <el-dialog :title="title" :visible.sync="isVisible" width="60%" @click="closeDialog(false)" @close="closeDialog(false)">

            <el-form label-width="120px"  :model="editForm" :rules="rules" ref="editForm">

              <el-row>
                <el-col :span="12">
                  <el-form-item label="预售课程" prop="statusCode">
                    <el-switch v-model="editForm.statusCode" ></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否发布" prop="title">
                    <el-switch v-model="editForm.isPublished"  ></el-switch>

                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-form-item label="视频名称" prop="title">
                  <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入广告名称"></el-input>
                </el-form-item>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属学科" prop="subjectCode">

                    <el-select v-model="editForm.subjectCode"
                               style="width:100%"
                               multiple
                               filterable
                               allow-create
                               default-first-option
                               placeholder="请选择">

                      <el-option-group
                        v-for="group in subjectList"
                        :key="group.name"

                        :label="group.name">
                        <el-option
                          v-for="item in group.childrens"
                          :key="item.name"
                          :label="item.name"
                          :value="item.name">
                        </el-option>
                      </el-option-group>

                    </el-select>

                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属分类" prop="productTypeCode">
                    <el-select v-model="editForm.productTypeCode"
                               style="width:100%"

                               placeholder="请选择分类">

                        <el-option
                          v-for="item in categoryList"
                          :key="item.name"
                          :label="item.name"
                          :value="item.name">
                        </el-option>

                    </el-select>


                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  <el-form-item label="主办单位" prop="organizer">
                    <el-input size="small" v-model="editForm.organizer" auto-complete="off" placeholder="请输入广告名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="主讲专家" prop="speaker">
                    <el-input size="small" v-model="editForm.speaker" auto-complete="off" placeholder="请输入广告名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>



              <el-row>
                <el-col :span="12">
                  <el-form-item label="列表图" prop="headerPictureUrl">
                    <el-upload

                      id="listImage"
                      data-id="listImage"
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      list-type="picture-card"
                      :on-success="handleListImageSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="listFile.url" :src="listFile.url" style="width: 100%;height:100%">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="详情图" prop="pictureUrl">
                    <el-upload
                      id="detailImage"
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      list-type="picture-card"
                      :on-success="handleDetailImageSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="detailFile.url" :src="detailFile.url"  style="width: 100%;height:100%" >

                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-form-item label="新闻详情">
                  <quill-editor
                    class="editor"
                    v-model="editForm.description"
                    ref="myQuillEditor"
                  >
                  </quill-editor>
                </el-form-item>
              </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: right">
              <el-button size="small" @click="closeDialog(false)">取消</el-button>
              <el-button size="small" type="primary"  class="title" @click="submitForm('editForm')">保存</el-button>
            </div>


      </el-dialog>

    </template>

<script>
    import {post} from "../../api/axiosFun";
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import {localApi} from "../../api/baseApi"

    export default {
        name: 'videoEdit',
        componentName: 'videoEdit',
        components:{quillEditor},
        props: {
            dialogVisible:false,
            rowData:{},
            subjectList:{
                type:Array,
                default:[]
            },
            categoryList:{
                type:Array,
                default:[]
            },
            //formatSubjectList:[]
        },
        data() {
            return {
                title: '添加',
                content:"",
                //tab-1
                isVisible: this.dialogVisible,
                listFile:{
                    url:'',
                    file:Object
                },
                detailFile:{
                    url:'',
                    file:Object
                },
                circleId:17037,
                editForm: {
                    subjectCode:'',//
                    pictureUrl:'',//
                    headerPictureUrl:'',//
                    organizer:'',//
                    //userId:514728,
                    description:"",//
                    title:"",//
                    productTypeCode:"",//
                    speaker:"",//
                    statusCode:"",
                },
                rules: {
                    title: [{ required: true, message: '请输入视频名称', trigger: 'blur' }],
                    subjectCode: [{ required: true, message: '请先选择所属科目', trigger:'change' }],
                    productTypeCode: [{ required: true, message: '请先选择所属分类', trigger: 'change' }],
                    organizer: [{ required: true, message: '请输入主办单位', trigger: 'blur' }],
                    speaker: [{ required: true, message: '请先输入演讲专家', trigger: 'blur' }],
                    //pictureUrl: [{ required: true, message: '请先上传详情图片', trigger: 'blur' }],
                   // headerPictureUrl: [{ required: true, message: '请先上传列表图片', trigger: 'blur' }]
                }
            };
        },
        methods:{
            productChanged(e){
              this.editForm.isPublished = e;
            },

            // 关闭编辑、增加弹出框
            closeDialog(saveOrNot) {
                this.isVisible = false;
                this.$emit('onDialogClose',saveOrNot);
            },

            //提交基本信息
            submitForm(editData) {
                var that = this;
                this.$refs[editData].validate(valid => {

                    if (valid) {
                        var client = this.F.getOssClient();
                        if(that.listFile.file){
                            client.put("testback/"+that.F.getUniqueId(that.F.getFileLastPre(that.listFile.file.name)),
                                that.listFile.file.raw).then(function (r1) {

                                that.editForm.headerPictureUrl = r1.name;

                            }).catch(function (err) {
                                console.log('error', err);
                            });
                        }

                        if(that.detailFile.file){
                            client.put("testback/"+that.F.getUniqueId(that.F.getFileLastPre(that.listFile.file.name)),
                                that.listFile.file.raw).then(function (r1) {

                                that.editForm.pictureUrl = r1.name;

                            }).catch(function (err) {
                                console.log('error', err);
                            });
                        }


                        post(localApi+"umv/userMvgAdd/"+that.circleId,this.editForm)
                            .then(res=>{
                               this.closeDialog(true);
                            }).catch(err=>{
                            this.$message.error('信息保存失败，请稍后重试！'+err)
                        })

                    } else {
                        return false
                    }
                })
            },

            handleDetailImageSuccess(res, file) {
                this.detailFile = file;
            },
            handleListImageSuccess(res, file) {


                  console.log("res-file",res);
                  this.listFile = file;

                // var client = this.F.getOssClient();
                //
                // client.put("testback/"+file.name, file.raw).then(function (r1) {
                //
                //
                //     return client.get("testback/"+file.name);
                //
                // }).then(function (r2) {
                //     console.log('get success', r2);
                // }).catch(function (err) {
                //     console.log('error', err);
                // });
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.toString().indexOf("image")>=0;
                const isLt2M = file.size / 1024 / 1024 < 2;

                this.editForm.pictureUrl = file.name;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        },
        watch: {
            subjectList:{
              handler:function(val){
              }
            },
            //监听窗口变化，通知母版
            dialogVisible: {
                handler: function (val) {
                    if (val) {
                        this.isVisible = true;
                        this.editForm = this.rowData;
                        if(this.rowData.id!=undefined && this.rowData.id>0){
                            this.title="编辑";
                        }
                        else{
                            this.title = "添加";
                        }
                    }
                }
            }

        },
        mounted() {
        }
    };
</script>

    <style scoped>
      .avatar{
        max-width: 150px;
        max-height: 150px;
      }
    </style>

